<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>font test</title>
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

    <link href="http://cdn.bootcss.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet">

    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>

    <style type="text/css">
        body{
            /*padding-top: 50px;
            padding-bottom: 50px;*/
        }
        i{
            cursor: pointer;
        }
    </style>

    <script>
        var appModule = angular.module('app', []);
        appModule.directive('hello', function() {
            return {
                restrict: 'E',
                template: '<div>Hi there</div>',
                replace: true
            };
        });
        appModule.controller("mainctrl",function ($rootScope,$scope) {
            $scope.lists = [1,2,3,4,5,6,7,8,9,10];

            /*$scope.prototype.html = "<p><i class='icon-camera-retro icon-large'></i> icon-camera-retro</p>"+
            +<p><i class='icon-camera-retro icon-2x'></i>icon-camera-retro</p>"
                +"<p><i class='icon-camera-retro icon-3x'></i> icon-camera-retro</p>"
                +"<p><i class='icon-camera-retro icon-4x'></i> icon-camera-retro</p>";*/

            var html = (function () {/*
             <p><i class='icon-camera-retro icon-large'></i> icon-camera-retro</p>
             <p><i class='icon-camera-retro icon-2x'></i>icon-camera-retro</p>
             <p><i class='icon-camera-retro icon-3x'></i> icon-camera-retro</p>
             <p><i class='icon-camera-retro icon-4x'></i> icon-camera-retro</p>
             */}).toString().match(/[^]*\/\*([^]*)\*\/\}$/)[1];

            $rootScope.htmlTemp = html;

            $scope.add_one = 1;
            $scope.add_two =2;

            $rootScope.title = "弹出框title";

        });
        appModule.directive('bsPopup', function ($parse) {
            return {
                require: 'ngModel',
                restrict: 'A',
                link: function (scope, elem, attrs, ctrl) {
                    scope.$watch(function () {
                        return $parse(ctrl.$modelValue)(scope);
                    }, function (newValue) {
                        if (newValue ==0) {
                            $(elem).modal('hide');
                            return;
                        }
                        if (newValue == 1) {
                            $(elem).modal('show');
                            return;
                        }
                    });
                }
            }
        });
        appModule.factory('dataService',function($rootScope) {
            var service = {};
            service.cacheObj = {};
            service.getAppName = function (appId, callback) {
                if (service.cacheObj[appId]) {
                    console.log('get name from cache');
                    callback(service.cacheObj[appId]);
                    return;
                }
                //here is sample. Always ajax.
                service.cacheObj[appId] = 'QQ';
                callback('QQ');
            };
            service.getTitle = function () {
                return $rootScope.title;
            }
            console.log(1111111111111);
            return service;
        });
        appModule.directive('myPopover', function ($rootScope,dataService) {//myPopover在定义时采用驼峰命名,在使用时采用减号分隔.
            return {
                restrict: 'A',
                link: function (scope, ele, attrs) {
                    $(ele).data('title',dataService.getTitle());
                    $(ele).data('content', $rootScope.htmlTemp);
                    $(ele).popover({ html: true, trigger: 'hover'});
                    /*$(ele).on('shown.bs.popover',function() {
                        var popDiv = $('#popDiv');
                        console.log(popDiv);
                        dataService.getAppName('xxx',function(name) {
                            popDiv.html('Name:'+name);
                        });
                    });*/
                }
            };
        });
    </script>

</head>
<body ng-app="app" ng-controller="mainctrl">

<!--
<p><i class="icon-camera-retro icon-large"></i> icon-camera-retro</p>
<p><i class="icon-camera-retro icon-2x"></i> icon-camera-retro</p>
<p><i class="icon-camera-retro icon-3x"></i> icon-camera-retro</p>
<p><i class="icon-camera-retro icon-4x"></i> icon-camera-retro</p>

<p><i class="icon-flag icon-4x icon-border"></i></p>

<br><br>
<i class="icon-user icon-4x"></i>
<i class="icon-tasks icon-4x"></i>
<i class="icon-spinner icon-spin icon-4x"></i>
<i class="icon-angle-left icon-4x"></i>
<i class="icon-github-alt icon-4x"></i>
-->

<div><!--TOP NAV-->
    <nav class="navbar navbar-default" role="navigation">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse"
                        data-target="#example-navbar-collapse">
                    <span class="sr-only">切换导航</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">菜鸟教程</a>
            </div>
            <div class="collapse navbar-collapse" id="example-navbar-collapse">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">iOS</a></li>
                    <li><a href="#">SVN</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                            Java <b class="caret"></b>
                        </a>
                        <ul class="dropdown-menu">
                            <li><a href="#">jmeter</a></li>
                            <li><a href="#">EJB</a></li>
                            <li><a href="#">Jasper Report</a></li>
                            <li class="divider"></li>
                            <li><a href="#">分离的链接</a></li>
                            <li class="divider"></li>
                            <li><a href="#">另一个分离的链接</a></li>
                        </ul>
                    </li>
                    <li><p class="navbar-text">Runoob 用户登录</p></li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#"><span class="glyphicon glyphicon-user"></span> 注册</a></li>
                    <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> 登录</a></li>
                </ul>
            </div>
        </div>
    </nav>
</div>

<div style="margin:10px auto;background-color: #f7f7f7;width: 30%;" class="container">

    <hello></hello>

    <form class="bs-example bs-example-form" role="form">
        <div class="input-group container" style="width: 100%;">
            <span style="width: 50px;" class="input-group-addon"><i class="icon-user icon-large"></i></span>
            <input type="text" class="form-control" placeholder="please input username">
        </div>
        <div class="input-group container" style="width: 100%;">
            <span class="label label-danger" style="margin-left: 50px;">错误!两次输入的密码不一致</span>
        </div>
        <br>
        <div class="input-group container" style="width: 100%;">
            <span style="width: 50px;" class="input-group-addon"><i class="icon-lock icon-large"></i></span>
            <input type="password" class="form-control" placeholder="please input password">
        </div>
        <div class="input-group container" style="width: 100%;">
            <span class="label label-danger" style="margin-left: 50px;">错误!两次输入的密码不一致</span>
        </div>
        <br>
        <div class="input-group container" style="width: 100%;">
            <span style="width: 50px;" class="input-group-addon"><i class="icon-envelope icon-large"></i></span>
            <input type="text" class="form-control" placeholder="please input email">
        </div>
        <div class="input-group container" style="width: 100%;">
            <span class="label label-danger" style="margin-left: 50px;">错误!两次输入的密码不一致</span>
        </div>
        <br>
        <div class="input-group container" style="width: 100%;">
            <span style="width: 50px;" class="input-group-addon"><i class="icon-phone icon-large"></i></span>
            <input type="text" class="form-control" placeholder="please input tel">
        </div>
        <div class="input-group container" style="width: 100%;">
            <span class="label label-danger" style="margin-left: 50px;">错误!两次输入的密码不一致</span>
        </div>
        <br>
        <div class="input-group container" style="width: 100%;">
            <span style="width: 50px;" class="input-group-addon"><i class="icon-list-alt icon-large"></i></span>
            <!--<input type="text" class="form-control" placeholder="please input tel">-->
            <select name="" id="" class="form-control">
                <option value="">java</option>
                <option value="">ios</option>
                <option value="">web</option>
            </select>
        </div>
        <div class="input-group container" style="width: 100%;">
            <span class="label label-danger" style="margin-left: 50px;">错误!两次输入的密码不一致</span>
        </div>
        <br>
        <div class="input-group container" style="width: 100%;">
            <input type="file" class="file">
            <span style="color: red;font-size: large">*</span>
        </div>
        <br>
        <div class="input-group container" style="width: 100%;">
            <button class="btn btn-info form-control">注册</button>
        </div>
    </form>
</div>

<div class="container" style="padding: 100px 50px 10px;" >
    <button type="button" class="btn btn-default popover-show"
            title="Popover title" data-container="body"
            data-toggle="popover" data-placement="left"
            data-content="左侧的 Popover 中的一些内容 —— show 方法">
        左侧的 Popover
    </button>
    <button type="button" class="btn btn-primary popover-hide"
            title="Popover title" data-container="body"
            data-toggle="popover" data-placement="top"
            data-content="顶部的 Popover 中的一些内容 —— hide 方法">
        顶部的 Popover
    </button>
    <button type="button" class="btn btn-success popover-destroy"
            title="Popover title" data-container="body"
            data-toggle="popover" data-placement="bottom"
            data-content="底部的 Popover 中的一些内容 —— destroy 方法">
        底部的 Popover
    </button>
    <button type="button" class="btn btn-warning popover-toggle"
            title="Popover title" data-container="body"
            data-toggle="popover" data-placement="right"
            data-content="右侧的 Popover 中的一些内容 —— toggle 方法">
        右侧的 Popover
    </button><br><br><br><br><br><br>
    <p class="popover-options">
        <a href="#" type="button" class="btn btn-warning" title="<h2>Title</h2>"
           data-container="body" data-toggle="popover" data-placement="top" data-content="
         <p><i class='icon-camera-retro icon-large'></i> icon-camera-retro</p>
    <p><i class='icon-camera-retro icon-2x'></i> icon-camera-retro</p>
    <p><i class='icon-camera-retro icon-3x'></i> icon-camera-retro</p>
    <p><i class='icon-camera-retro icon-4x'></i> icon-camera-retro</p>">
            Popover
        </a>
    </p>
    <script>
        $(function () { $('.popover-show').popover('show');});
        $(function () { $('.popover-hide').popover('hide');});
        $(function () { $('.popover-destroy').popover('destroy');});
        $(function () { $('.popover-toggle').popover('toggle');});
        $(function () { $(".popover-options").popover({html : true });});
    </script>
</div>

<!--<button class="btn btn-xs btn-warning" data-target="#myModal" data-toggle="modal" ng-click="sss()">弹框</button>
<div aria-hidden="true" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" class="modal fade" bs-popup="" ng-model="test"
     id="myModal" style="display: none;">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header alert-info">
                <button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button>
                <h4 id="myModalLabel" class="modal-title">弹框</h4>
            </div>
            <div class="modal-body">
                <button class="btn btn-info" ng-click="hhh()">测试</button>
            </div>
        </div>
        &lt;!&ndash; /.modal-content &ndash;&gt;
    </div>
    &lt;!&ndash; /.modal-dialog &ndash;&gt;
</div>-->

<div>
    <button class="btn btn-info btn-lg" my-popover>app 1</button>
    <button class="btn btn-danger btn-lg" my-popover>app 2</button>
</div>



</body>
</html>